<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基于 workerman 实现聊天室</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <style>
        .item {
            border: 1px solid #ccc; padding: 10px;
        }
    </style>
</head>
<body style="margin: 0 auto">
<div class="form-group col-sm-9">
    <h2>基于 workerman 实现聊天室</h2>
    <input type="text" class="form-control" placeholder="请输入您的名字" id="name">
    <br>
    <textarea name="" id="content" cols="30" rows="10" class="form-control" placeholder="请输入待发送的内容"></textarea>
    <br>
    <input type="button" class="btn btn-default" value="发送" onclick="my_send()">
</div>

<div class="jumbotron col-sm-9" style="margin: 10px;">
    <!--<div class="item col-sm-9">-->
    <!--<div>-->
    <!--<div class="col-sm-3">GetcharZp</div>-->
    <!--<div class="col-sm-5">2020-01-07 22:08</div>-->
    <!--</div>-->
    <!--<div class="col-sm-10">-->
    <!--GetcharZp-->
    <!--</div>-->
    <!--</div>-->
</div>
</body>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    /**
     * 与GatewayWorker建立websocket连接，域名和端口改为你实际的域名端口，
     * 其中端口为Gateway端口，即start_gateway.php指定的端口。
     * start_gateway.php 中需要指定websocket协议，像这样
     * $gateway = new Gateway(websocket://0.0.0.0:7272);
     */
     ws = new WebSocket("wss://chat.baiduc.club/ws");
    ws.onopen = function() {
        alert("连接成功");
        //ws.send('tom');
        // alert("给服务端发送一个字符串：tom");
    };
    function my_send() {
        var name = $('#name').val();
        var content = $('#content').val();
        //var data = '{"name":"'+ name +'", "content":"'+ content +'"}';

         $.post('./send.php', {uid:3,to_uid:2,name:name,content:content}, function(data){
                    console.log(data)
                }, 'json');
    }
    // 服务端主动推送消息时会触发这里的onmessage
    ws.onmessage = function(e){
        console.log(e.data+'wwwwwwwwwwwwwwwwwwwwwwwww')
        // json数据转换成js对象
        var data = eval("("+e.data+")");
        var type = data.type || '';
       
        switch(type){
            // Events.php中返回的init类型的消息，将client_id发给后台进行uid绑定
            case 'init':
                // 利用jquery发起ajax请求，将client_id发给后端进行uid绑定
                $.post('./bind.php', {client_id: data.client_id,uid:3}, function(data){
                    console.log(data+'bbbbbbbbbbbbb')
                }, 'json');
                break;
            // 当mvc框架调用GatewayClient发消息时直接alert出来
            default :
                console.log(e.data+"mmmmmmmmmmmmm");
                var data = JSON.parse(e.data);
                console.log(e);
                console.log(data);
                var item = "<div class=\"item col-sm-9\">\n" +
                    "        <div>\n" +
                    "            <div class=\"col-sm-3\">"+ data.name +"</div>\n" +
                    "            <div class=\"col-sm-5\">"+ data.time +"</div>\n" +
                    "        </div>\n" +
                    "        <div class=\"col-sm-10\">\n" +
                    "            "+ data.content +"\n" +
                    "        </div>\n" +
                    "    </div>";
                $('.jumbotron').append(item);
                        break;
                }
    };
</script>
</html>